<template>
  <div class="fa-table-fill" :style="{ paddingLeft: offset, marginLeft: `-${offset}` }">
    <TableMain
      :data="data"
      :style="{
        width: `${data.w}px`,
        fontSize: '14px'
      }"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { Widget } from '@/models'
import TableMain from './table/TableMain.vue'

/** 表格控件 填写 */
export default defineComponent({
  name: 'FaTableFill',

  components: { TableMain },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    return {
      /** 文本占位 */
      placeholder: computed(() => {
        const widget = props.data
        return widget.text.placeholder || `请选择${widget.displayName}`
      }),

      /** 偏移 */
      offset: computed(() => {
        const widget = props.data

        return widget.isHorizontalTable && widget.tableOptions.dynamic ? '20px' : '0px'
      })
    }
  }
})
</script>

<style lang="scss">
.fa-table-fill {
  width: 100%;
  overflow: auto;

  .table {
    background: #fff;

    .table-handle.is-vertical {
      margin-right: 0;
    }
  }
}
</style>
